<template>
  <view>
    <view class="topt">
      <uni-popup ref="popupCoupon" type="top" top="100rpx" >
        <view class="tops">
          <view @click="onFilter(data.datas,item)" v-for="(item, index) in data.datas" :key="index">
            {{ item }}
          </view>
        </view>

      </uni-popup>
    </view>
    <view class="topTab">
      <view @click="toggle1('top')">
        <text class="">房产类型</text>
        <uni-icons type="bottom" size="16"></uni-icons>
      </view>
      <view @click="toggle2('top')">
        <text>区域选择</text>
        <uni-icons type="bottom" size="16"></uni-icons>
      </view>
    </view>
    <!-- 列表 -->
  <view class="list_box">
    <my_list></my_list>
  </view>
  
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {renting} from '../../stores/index'
const useRenting = renting()
const popupCoupon = ref()
const data = reactive({
  datas: [],
  classify: [
    '多层住宅',
    '高层住宅',
    '小高层住宅',
    '商铺/门面房',
    '厂房',
    '写字楼',
    '独院/别墅',
    '车库',
  ],
  area: [
    '海淀区',
    '朝阳区',
    '丰台区',
    '大兴区',
    '延庆区',
    '昌平区',
    '顺义区',
  ],
})

uni.request({
  url: '/live',
  method: 'get',
  success: (success) => {
    console.log(success);
  },
})
const toggle1 = (type) => {
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  data.datas = data.classify
  popupCoupon.value.open()
}
const toggle2 = (type) => {
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  data.datas = data.area
  popupCoupon.value.open()
}

// 过滤数据
const onFilter = (data,item)=>{
  console.log(item);
  // console.log(data[0]==='多层住宅');
  // console.log(data[0]==='海淀区','2');
  if(data[0]==='海淀区'){
    useRenting.filterClass(item)
  }else{
    useRenting.filterAdd(item)
  }
  popupCoupon.value.close()
}
</script>

<style lang="scss" scoped>
.topTab {  
  position: fixed;
  width: 100vw;
  background: #fff;
  top: 0;
  display: flex;
  justify-content: space-around;
  line-height: 80rpx;
  border-bottom: 1px solid grey;

}

.tops {
  background: #fff;
  view{
    line-height: 100rpx;
    border-bottom: 1px solid rgb(213, 213, 213);
    
  }
}
.topt{
  background: #fff;
}
.list_box{
  margin-top: 90rpx;
}

</style>